<template>
  <div>
      <!-- 修改广告组 -->
    <div class="example">
        <a-spin size="large" tip="Loading..." :spinning="spinning" />
    </div>
    <div v-if="spinning ==false">

    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="创建新广告组">
           <a-form :form="form">
            <a-form-item
                :label="$t('推广目的')"
                :labelCol="{span: 2}"
                :wrapperCol="{span: 200}"
                :required="true"
            >
                <div class="layui-row objectivebox" ref="typetip" prop="typetip">
                    <div class="layui-col-md2" @click="actives($event,'1')" :class="[typeshow==1 ? 'actives' : '']">
                        <input type="hidden" name="landing_type" value="APP">
                        <div class="campaign-card-tip">
                            <strong>应用推广</strong>
                            <p>提升应用的下载、安装、激活、付费</p>
                        </div>
                        <div class="campaign-card-img">
                            <img :src="imgurl('campaign-app.svg')" alt="">
                        </div>
                        <div v-show="typeshow==1">
                        <div class="checkobjective">
                            <a-icon type="check" />
                        </div>
                        </div>
                    </div>
                    <div class="layui-col-md2" @click="actives($event,'2')" :class="[typeshow==2 ? 'actives' : '']">
                        <input type="hidden" name="landing_type" value="LINK">
                        <div class="campaign-card-tip">
                            <strong>销售线索收集</strong>
                            <p>提升销售线索的获取量</p>
                        </div>
                        <div class="campaign-card-img">
                            <img :src="imgurl('campaign-external.svg')" alt="">
                        </div>
                        <div v-show="typeshow==2">
                        <div class="checkobjective">
                            <a-icon type="check" />
                        </div>
                        </div>
                    </div>

                    <div class="layui-col-md2" @click="actives($event,'3')" :class="[typeshow==3 ? 'actives' : '']">
                        <input type="hidden" name="landing_type" value="AWEME">
                        <div class="campaign-card-tip">
                            <strong>抖音号推广</strong>
                            <p>提升抖音号的粉丝量、互动量</p>
                        </div>
                        <div class="campaign-card-img">
                            <img :src="imgurl('campaign-aweme.svg')" alt="">
                        </div>
                         <div v-show="typeshow==3">
                        <div class="checkobjective">
                            <a-icon type="check" />
                        </div>
                         </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </a-form-item>
             <a-form-item
                :label="$t('广告组预算：')"
                :labelCol="{span: 2}"
                :wrapperCol="{span: 10}"
                :required="true"
                >
                <div class="form-row">
                    <a-button @click="onbudget($event,'1')" :type="[primary==1 ? 'primary' : '']">不限</a-button>
                    <a-button @click="onbudget($event,'2')" :type="[primary==2 ? 'primary' : '']">预算</a-button>
                </div>
             </a-form-item>
             <div class="disnon" :style="{display:isblock}">
                <a-form-item
                    :label="$t('日预算')"
                    :labelCol="{span: 2}"
                    :wrapperCol="{span: 10}"
                    :required="true"
                    >
                    <div class="form-row">
                    <a-input-number id="inputNumber"
                    v-decorator="[
                        'budget',
                    ]"
                     style="width:200px;"  v-model="value" :min="0" :max="9999999.99" :step="0.0" />
                    </div>
                </a-form-item>
             </div>
             <a-form-item
                :label="$t('广告组名称')"
                :labelCol="{span: 2}"
                :wrapperCol="{span: 10}"
                 :required="true"
                >
                <div class="form-row">
                  <a-input v-decorator="[
				'name',
                { rules: [{ required: true, message: '请输入广告名称' }] }
				]" placeholder="请输入广告组名称" />
                </div>
             </a-form-item>

             <a-form-item
                :label="$t('广告组账户')"
                :labelCol="{span: 2}"
                :wrapperCol="{span: 10}"
                 :required="true"
                >
                <div class="form-row">
                   <a-select
                    show-search
                    placeholder="请选择广告组账户"
                    option-filter-prop="children"
                    style="width: 200px"
                    :filter-option="filterOption"
                    v-decorator="[
                        'advertiser_id',
                        {rules:[],initialValue:'1657869217074189'}
                    ]"
                >
                    <a-select-option v-for="item in options" :key="item.account_id" :value="item.account_id">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
                </div>
             </a-form-item>
              <a-form-item
                :label="$t('广告组状态')"
                :labelCol="{span: 2}"
                :wrapperCol="{span: 10}"
                >
                <div class="form-row">
                    <a-switch default-checked @change="onChange" />
                </div>

              </a-form-item>
              <div style="margin-left:135px;">
               <a-popconfirm
                    title="您确定要取消新增广告组吗?"
                    ok-text="Yes"
                    cancel-text="No"
                    @confirm="cancels"
                >
                <a-button  size="large" style="margin-right:10px;">
                    取消
                </a-button>
                </a-popconfirm>
                <a-button type="primary" @click="determines" size="large">
                    确定
                </a-button>
              </div>
               
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="选择已有广告组" force-render v-if="tabs ==2">
          <a-form layout="horizontal" :form="form" @submit="handleSubmit">
             <a-form-item
              label="关键词搜索"
              :labelCol="{span: 2}"
              :wrapperCol="{span: 6, offset: 1}"
            >
         <a-input-search placeholder="请输入广告组ID或名称" enter-button @search="onSearch" />
            </a-form-item>
        </a-form>
        
         <a-list item-layout="horizontal" style="width:600px;" :data-source="datalist" :pagination="pagination">
            <a-list-item slot="renderItem"  @click="tolink(item.id,item.landing_type)" slot-scope="item">
                
                <a-list-item-meta>
                    <a slot="title">{{ item.name }}</a>
                </a-list-item-meta>

                <div v-if="item.landing_type =='LINK'">信息流-销售线索收集</div>
                <div v-if="item.landing_type =='APP'">信息流-应用推广</div>
                <div v-if="item.landing_type =='DPA'">信息流-商品目录推广</div>
                <div v-if="item.landing_type =='GOODS'">信息流-商品推广（鲁班）</div>
                <div v-if="item.landing_type =='STORE'">信息流-门店推广</div>
                <div v-if="item.landing_type =='AWEME'">信息流-抖音号推广</div>
                <div v-if="item.landing_type =='SHOP'">信息流-电商店铺推广</div>
                <div v-if="item.landing_type =='ARTICAL'">信息流-头条文章推广</div>
            </a-list-item>
        </a-list>

      </a-tab-pane>
    </a-tabs>
    </div>
  </div>
</template>
<script>
import {ACCOUNTURL,EDITADURL,ADVER} from '@/services/api'
import {ajax,ajaxnoparams,ajaxparems} from '@/services/ajaxrequest'
var options =[];
var data = new Object();
const datalist = [];
export default {
    created(){
        var queid =this.$route.query.ids;
        this.tabs = this.$route.query.tabs;
        this.id = queid;
        this.ids = queid;
        this.listNew();
        this.pageinfo();
	},
	beforeCreate() {
    this.form = this.$form.createForm(this);
    },
  data() {
    return {
        spinning:true,
        ids:[],
        id:'',
        typeshow:0,
        options:options,
        primary:1,
        isblock:'none',
        switchons:true,
        pagination: {
            onChange: page => {
            console.log("page", page);
            },
            pageSize: 3
        },
        info:'',
        userName:"",
        modify_time:'',
        datalist,
        tabs:'',
    };
  },
  methods: {
    tolink(e,type){
        this.$router.push({
            path: '/promotion/advering/addplan/',
            query: {
                campaign_id: e,
                landing_type:type,
            }
        })
    },
   callback(key) {
       if(key ==2){
           //请求已有广告组
            ajaxparems(ADVER,"").then((res) => {
                var result=res.data;
                this.datalist =result.data.list;
            })
       }
    },
    onSearch(value) {       
         var parems = {"filtering":[
        {"field":"id","operator":"EQUALS","value":value},
        {"field":"name","operator":"LIKE","value":value},
        ]};

       ajaxparems(ADVER,parems).then((res) => {
            var result=res.data;
			this.datalist =result.data.list;
		})
    },
    // actives:function (e,num) {
    //    this.typeshow = num;
    // },
    onbudget:function (e,num){
        
        if(num ==2){
            this.primary =2;
            this.isblock = "block";
        }else{
            this.primary =1;
            this.isblock = "none";
        }
    },
    listNew(){
        //查询账户
        ajax(ACCOUNTURL,"").then((res) => {
            var result=res.data;
            console.log(result);
            if(result.code =="SUCCESS"){
                this.options =result.data;
            }else{
                this.$message.Error(result.message, 3)
            }
        })
        this.spinning = false;
    },
    pageinfo(){

         var parems = {"filtering":[
        {"field":"id","operator":"EQUALS","value":this.ids},
        ]};
        ajaxparems(ADVER,parems).then((res) => {
            var result=res.data;
            if(result.code =="SUCCESS"){
                var datainfo = result.data.list[0];
                if(datainfo.landing_type =="APP"){
                    this.typeshow =1;
                }else if(datainfo.landing_type =="LINK"){
                     this.typeshow =2;
                }else if(datainfo.landing_type =="AWEME"){
                     this.typeshow =3;
                }
               
                if(datainfo.budget_mode =="BUDGET_MODE_DAY"){
                     this.form.setFieldsValue({
                        budget: datainfo.budget,
                    })
                    this.primary =2;
                }else{
                    this.primary =1;
                }
                
                this.form.setFieldsValue({
                    account_id: datainfo.campaign_id,
                })
                this.form.setFieldsValue({
                    name: datainfo.name,
                })
                this.modify_time = datainfo.modify_time;
            }else{
                this.$message.error(result.message, 3)
            }
        });
    },
    cancels(){
        this.$router.push('/promotion/advering/advers')
    },
    determines(){
        this.form.validateFieldsAndScroll((err, values) => {
            // var types = this.typeshow;
            // if(types =="0"){
            //      this.$message.error("请选择推广目的", 3);
            //      return;
            // }else if(types =="1"){
            //     data.landing_type = "APP";
            // }else if(types =="2"){
            //     data.landing_type = "LINK";
            // }else if(types =="3"){
            //     data.landing_type = "AWEME";
            // }

            console.log(values);
            
            var primary = this.primary;
            if(primary ==2){
                if(values.budget ==undefined){
                    this.$message.error("请输入预算值", 3);
                    return;
                }
                data.budget = values.budget;
                data.budget_mode = "BUDGET_MODE_DAY";
            }else{
                // data = "";
                data.budget_mode = "BUDGET_MODE_INFINITE";
            }
            data.campaign_name = values.name;
            data.advertiser_id=values.advertiser_id;
            data.campaign_id = this.id;
            data.modify_time = this.modify_time;

            var parems = data;
			ajaxnoparams(this.account_id,EDITADURL,parems).then((res) => {
				var result=res.data;
				if(result.code =="SUCCESS"){
                    this.$message.success(result.message, 3).then(
                        this.$router.push('/promotion/advering/advers')
                    );
                    this.reload();
				}else{
 					this.$message.error(result.message, 3)
				}
			})
		});
    },
    onChange(checked) {
        this.switchons = checked;
    },
    imgurl (name){
      return require('@/assets/img/'+name);
    }
  },
};
</script>

<style scoped>
  .example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
  }
.ant-layout{
    background: #fff;
}
/* 广告组推广目的 */
.objectivebox .layui-col-md2{
    width:275px;
    height: 125px;
    position: relative;
    display: inline-block;
}
.disnon{
    display: none;
}

.objectivebox .layui-col-md2 .campaign-card-tip{
    width: 106px;
    display: inline-block;    
    font-size: 14px;
    color: #333;
    text-align: left;
    /* padding:20px; */
    padding:20px 0 20px 20px;
    float:left;
}

.campaign-card-tip strong{
    font-weight: 700;
}

.campaign-card-tip p{
    margin-top: 10px;
    font-size: 12px;
    color:#999;
    font-weight: 300;
    line-height:1.1;
}

.objectivebox .layui-col-md2{
    border: 1px solid #EDF1F5;
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
    border-radius: 4px;
    margin-right: 16px;
    margin-top: 10px;
    cursor: pointer;
    position: relative;
    display: none;
}

.objectivebox .layui-col-md2 .campaign-card-img{
    width: 120px;
    height: 120px;
    display: inline-block;
}

.objectivebox .layui-col-md2 .campaign-card-img img{
    display: block;
    /* padding-top: 20px; */
}
.objectivebox .actives{
    border-bottom:3px solid #338aff;
    height:125px;
    display: block;
    margin-left: 140px;
    position: relative;
}

.objectivebox .checkobjective{
    position: absolute;
    right: 10px;
    top: 10px;
    /* display: none; */
}
.clear{
    clear: both;
}

.objectivebox .checkobjective i{
    font-size: 20px;
    font-weight: bold;
    color:#338aff;
}
</style>
